<template>
  <div id="IntroductionPersonnel">
    <el-dialog
      :visible="visible"
      title="引入人员"
      class="introductionPersonnelDialog"
      :before-close="handleClose"
      @open="handleOpen"
      width="60%"
    >
      <div class="dialogContent">
        <div class="pageHead">
          <el-form ref="listQuery" :model="listQuery" class="listQuery">
            <el-form-item>
              <el-input
                placeholder="姓名/工号/证件号码/手机号"
                v-model="listQuery.keyWord"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch(true)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="pageMain">
          <div class="tableContent">
            <el-table
              :data="tableData"
              v-loading="tableLoading"
              style="width: 100%"
              height="100%"
              size="medium"
              class="pageInnerTable"
              @selection-change="handleSelect"
            >
              <el-table-column
                align="center"
                type="selection"
                :selectable="selectable"
              />
              <el-table-column align="left" prop="jobNo" label="工号" />
              <el-table-column align="left" prop="realName" label="姓名" />
              <el-table-column align="left" prop="deptName" label="部门" />
              <el-table-column align="left" prop="idNoType" label="证照类型" />
              <el-table-column
                align="left"
                prop="idNo"
                label="证照号码"
                width="160px"
              />
            </el-table>
          </div>
          <el-pagination
            :small="true"
            background
            @size-change="(data) => handleSearchChange(data, 'pageSize')"
            @current-change="(data) => handleSearchChange(data, 'pageIndex')"
            :current-page="listQuery.pageIndex"
            :page-sizes="[10, 20, 50]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="pagingChild"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "IntroductionPersonnel",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    subId: {
      type: String,
      default: "",
    },
    searchDate: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      listQuery: {
        keyWord: "",
        subId: "",
        yearNumber: 0,
        monthNumber: 0,
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      tableLoading: false,
      batchList: [],
    };
  },
  methods: {
    searchDataList(isClean = false) {
      if(isClean) {
        this.listQuery.pageIndex = 1;
      }
      let params = "";
      this.listQuery.yearNumber = parseInt(this.searchDate[0]);
      this.listQuery.monthNumber = parseInt(this.searchDate[1]);
      // for (const key in this.listQuery) {
      //   if (Object.hasOwnProperty.call(this.listQuery, key)) {
      //     if ("" + this.listQuery[key]?.length) {
      //       if (params.length == 0) {
      //         params += `?${key}=${this.listQuery[key]}`;
      //       } else {
      //         params += `&${key}=${this.listQuery[key]}`;
      //       }
      //     }
      //   }
      // }
      this.tableLoading = true;
      this.$api.socialSecurity
        .UserPageList(this.listQuery)
        .then((res) => {
          if (!res.data.data) {
            this.tableData = [];
            this.total = 0;
            return this.$message.warning(res.data.message);
          }
          // console.log(res);
          this.tableData = res.data.data.items;
          this.total = res.data.data.totalCount;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    selectable(row) {
      return !row.isHaveLedger;
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleOpen() {
      this.listQuery.subId = this.subId;
      console.log(this.subId);
      // 根据传参查询引入人员列表
      this.searchDataList();
    },

    handleSelect(selection) {
      this.batchList = selection;
    },
    handleSubmit() {
      if (this.batchList.length == 0)
        return this.$message.warning("请勾选需要引入的人员");
      this.$emit("getUserList", this.batchList);
      // this.handleClose();
    },

    /**
     * @description 切换页面或页大小是触发
     * @param data 属性值
     * @param prop 属性名
     */
    handleSearchChange(data, prop) {
      this.listQuery[prop] = data;
      this.searchDataList();
    },

    handleSearch(isCLean = false) {
      this.searchDataList(isCLean);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../less/editCard.less");
#IntroductionPersonnel {
  .introductionPersonnelDialog {
    height: 100%;
    :deep(.el-dialog) {
      height: 70%;
      min-height: 500px;
      min-width: 750px;
      display: flex;
      align-items: center;
      flex-direction: column;
      & > * {
        width: 100%;
      }
      .el-dialog__header {
        height: 48px;
      }
      .el-dialog__body {
        flex: 1;
      }
      .el-dialog__footer {
        height: 60px;
      }
    }
  }
  .dialogContent {
    // height: 350px;
    height: 100%;
    position: relative;
    // .pageMain {

    // }
  }
  .listQuery {
    display: flex;
    & > * {
      margin-right: 10px;
    }
  }
  .pageMain {
    .tableContent {
      padding: 0;
      height: calc(100% - 50px);
      margin-bottom: 15px;
    }
    .pagingChild {
      text-align: right;
    }
  }
}
</style>